<%--
  Created by IntelliJ IDEA.
  User: HASEE
  Date: 2017/11/14
  Time: 19:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>信息管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
    <link href="/style/common_style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/jqueryValidate/jquery.validate.js"></script>
    <script type="text/javascript" src="/js/system/employee.js"></script>
    <script type="text/javascript" src="/js/plugins/jqueryForm/jquery.form.min.js"></script>
    <script src="/js/plugins/artDialog/jquery.artDialog.js?skin=blue"></script>
    <script type="text/javascript" src="/js/commonAll.js"></script>
    <script>
        $(function () {
            //选中已经选中的
            $("#editForm").submit(function () {
                $(".selected_permissions option").prop("selected",true);
                $(".menuSelect option").prop("selected",true);
            })
            //异步提交表单
            $("#editForm").ajaxForm(function (data) {
                if (data.success) {
                    showDialog("保存成功", function () {
                        window.location.href = "/role/list.do";
                    });
                }
            });

            //列表移动
            $("#selectAll").click(function () {
                moveAll(".all_permissions", ".selected_permissions");
            });
            $("#deselectAll").click(function () {
                moveAll(".selected_permissions", ".all_permissions");
            });
            $("#select").click(function () {
                moveSelect(".all_permissions", ".selected_permissions");
            });
            $("#deselect").click(function () {
                moveSelect(".selected_permissions", ".all_permissions");
            });

            var ids = [];
            //找到已选择的
            $.each($(".selected_permissions option"), function (index, item) {
                ids[index] = $(item).val();
            })
            //遍历所有的权限项目
            $.each($(".all_permissions option"),function (index, item) {
                if ($.inArray($(item).val(), ids) > -1) {
                    //在ids中可以找到
                    $(item).remove();//删除自己
                }
            })
            //菜单列表移动
            $("#mselectAll").click(function () {
                moveAll(".menuAll", ".menuSelect");
            });
            $("#mdeselectAll").click(function () {
                moveAll(".menuSelect", ".menuAll");
            });
            $("#mselect").click(function () {
                moveSelect(".menuAll", ".menuSelect");
            });
            $("#mdeselect").click(function () {
                moveSelect(".menuSelect", ".menuAll");
            });

            var ids = [];
            //找到已选择的
            $.each($(".menuSelect option"), function (index, item) {
                ids[index] = $(item).val();
            })
            //遍历所有的菜单项目
            $.each($(".menuAll option"),function (index, item) {
                if ($.inArray($(item).val(), ids) > -1) {
                    //在ids中可以找到
                    $(item).remove();//删除自己
                }
            });

        })


    </script>
</head>
<body>
<form name="editForm" action="/role/saveOrUpdate.do" method="post" id="editForm">
    <input type="hidden" name="id" value="${role.id}"/>
    <div id="container">
        <div id="nav_links">
            <span style="color: #1A5CC6;">角色编辑</span>
            <div id="page_close">
                <a>
                    <img src="/images/common/page_close.png" width="20" height="20" style="vertical-align: text-top;"/>
                </a>
            </div>
        </div>
        <div class="ui_content">
            <table cellspacing="0" cellpadding="0" width="100%" align="left" border="0">
                <tr>
                    <td class="ui_text_rt" width="140">角色名称</td>
                    <td class="ui_text_lt">
                        <input name="name" value="${role.name}" class="ui_input_txt02"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">角色代码</td>
                    <td class="ui_text_lt">
                        <input name="sn" value="${role.sn}" class="ui_input_txt02"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">分配角色</td>
                    <td class="ui_text_lt">
                        <table>
                            <tr>
                                <td>
                                    <select class="ui_multiselect01 all_permissions" multiple="true">
                                        <c:forEach items="${permissions}" var="item">
                                            <option value="${item.id}">${item.name}</option>
                                        </c:forEach>
                                    </select>
                                </td>
                                <td align="center">
                                    <input type="button" id="select" value="-->" class="left2right"/><br/>
                                    <input type="button" id="selectAll" value="==>" class="left2right"/><br/>
                                    <input type="button" id="deselect" value="<--" class="left2right"/><br/>
                                    <input type="button" id="deselectAll" value="<==" class="left2right"/>
                                </td>
                                <td>
                                    <select name="permissionIds" class="ui_multiselect01 selected_permissions"
                                            multiple="true">
                                        <c:forEach items="${role.permissions}" var="item">
                                            <option value="${item.id}">${item.name}</option>
                                        </c:forEach>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">菜单列表</td>
                    <td class="ui_text_lt">
                        <table>
                            <tr>
                                <td>
                                    <select class="ui_multiselect01  menuAll" multiple="true">
                                        <c:forEach items="${menus}" var="item">
                                            <option value="${item.id}">${item.name}</option>
                                        </c:forEach>
                                    </select>
                                </td>
                                <td align="center">
                                    <input type="button" id="mselect" value="-->" class="left2right"/><br/>
                                    <input type="button" id="mselectAll" value="==>" class="left2right"/><br/>
                                    <input type="button" id="mdeselect" value="<--" class="left2right"/><br/>
                                    <input type="button" id="mdeselectAll" value="<==" class="left2right"/>
                                </td>
                                <td>
                                    <select name="menuIds" class="ui_multiselect01 menuSelect"
                                            multiple="true">
                                        <c:forEach items="${role.menus}" var="item">
                                            <option value="${item.id}">${item.name}</option>
                                        </c:forEach>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="ui_text_lt">
                        &nbsp;<input type="submit" value="确定保存" class="ui_input_btn01"/>
                        &nbsp;<input id="cancelbutton" type="button" value="重置" class="ui_input_btn01"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</form>
</body>
</html>